<template>
  <right-template :title="componentData.title" :tabName="componentData.tabName">
    <el-form class="right-calendar">
      <dropdown-normal label="日历类型" :valLists="CALENDER_TYPE" v-model="commonAttr.calendarType" @change="onChangeAttr"></dropdown-normal>
      <template v-if="commonAttr.calendarType == CALENDER_TYPE_MAP.selectedDate">
        <input-normal label="可选择的最小日期" placehoder="2021/03/06" v-model="commonAttr.minDate" @change="onChangeAttr"></input-normal>
        <input-normal label="可选择的最大日期" placehoder="2021/03/06" v-model="commonAttr.maxDate" @change="onChangeAttr"></input-normal>
      </template>
      <color-normal v-model="commonAttr.backgroundColor" label="背景颜色" format="rgb" @change="onChangeAttr"></color-normal>
      <color-normal v-model="commonAttr.selectedBackgroundColor" label="选中背景颜色" format="rgb" @change="onChangeAttr"></color-normal>
      <color-normal v-model="commonAttr.color" label="日历颜色" format="rgb" @change="onChangeAttr"></color-normal>
      <color-normal v-model="commonAttr.selectedColor" label="日历选中颜色" format="rgb" @change="onChangeAttr"></color-normal>
      <input-normal label="选中边框地址" v-model="commonAttr.selectedBorderUrl" @change="onChangeAttr"></input-normal>
      <color-normal v-model="commonAttr.selectedBorderColor" label="选中边框颜色" format="rgb" @change="onChangeAttr"></color-normal>
      <input-normal label="日期字体大小" v-model="commonAttr.fontSize" @change="onChangeAttr"></input-normal>
      <!-- <el-button class="margin-16" type="primary" size="small" @click="productCalenderData">生成日历数据</el-button> -->
    </el-form>
  </right-template>
</template>


<script setup lang="ts">
import { useWebComponentStore } from '@/store/web/component'
import { CALENDER_TYPE, CALENDER_TYPE_MAP } from '@/const/'

const useWebComponent = useWebComponentStore()

let componentData_: any
const componentData = computed(() => {
  componentData_ = useWebComponent.currentComponentData
  return componentData_
})
let commonAttr_: any
const commonAttr = computed(() => {
  commonAttr_ = useWebComponent.currentComponentData!.commonAttr
  return commonAttr_
})
const onChangeAttr = () => {
  // useWebComponent.updateCurrentComponentData({ commonAttr: commonAttr_ })
}
</script>